<template>
  <div ref="echart" class="echartDiv"></div>
</template>

<script setup lang="js">
import * as echarts from 'echarts'
import 'echarts-gl'
import { onMounted, toRefs, ref, reactive } from 'vue'

const echart = ref(null)

//挂载
onMounted(() => {
  echartInit()
})

const echartInit = () => {
  var myChart = echarts.init(echart.value)
  let option = {
    title: {
      show: false,
      text: '',
      x: 'center'
    },
    tooltip: {},
    xAxis3D: {
      type: 'category',
      data: ['2020', '2021', '2022', '2023', '2024'],
      axisLine: {
        lineStyle: {
          color: 'white',
          width: 2
        }
      },
    },
    yAxis3D: {
      type: 'category',
      data: [''],
      axisLine: {
        lineStyle: {
          width: 1,
          color: 'black',
        }
      },
    },
    zAxis3D: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'white',
          width: 1
        }
      }
    },
    grid3D: {
      show: true,
      boxWidth: 200,
      boxDepth: 10,
      splitLine: {//是否显示坐标轴轴线
        show: false
      },
      axisPointer: {
        show: false
      },
      light: {
        main: {
          intensity: 1
        },
        ambient: {
          intensity: 0.5
        }
      },
      viewControl: {//可以控制整个柱状图场景旋转平移等，自行代数数据试试
        alpha: 0,
        beta: 0,
        minAlpha: 0,//x轴旋转
        maxAlpha: 0,
        minBeta: 0,//y轴旋转
        maxBeta: 0
      }
    },
    series: [
      {
        type: 'bar3D',
        name: '数据',
        barSize: 10,//柱子大小
        data: [
          [0, 0, 5],
          [1, 0, 4],
          [2, 0, 6],
          [3, 0, 7],
          [4, 0, 3],
        ],
        stack: 'stack',
        shading: 'lambert',
        itemStyle: {
          color: function (params) {
            var colorList = [
              'rgb(106, 240, 177)',
              'rgb(9, 117, 240)',
              'rgb(227, 233, 240)',
              'rgb(247, 183, 56)',
              'rgb(137, 240, 106)',
              'rgb(245, 138, 221)',
              'rgb(224, 85, 85)',
              '#12b7ee',
              '#f035a5'
            ]; //每根柱子的颜色

            return colorList[params.dataIndex];
          }
        },
        // 标签
        label: {
          show: true,
          position: "top",
          distance: 10,
          fontSize: 12,
          color: '#fff',
          fontWeight: 500
        },
        emphasis: {
          label: {
            show: true
          }
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

</script>

<style>
.echartDiv {
  width: 100%;
  height: 100%;
}

.s {
  color: rgba(247, 74, 5, 0.636);
}
</style>
